<script setup>
    import { computed } from 'vue'
    import { getVillageGirdList, getVillageStreetList, getVillageGirdDetails, getVillagePersonList } from '@/api/govern'
    import AccountDetails from './AccountDetails.vue'

    // 是否显示网格信息
    let dialogVisible = $ref(false)

    const showDialog = (orgCode) => {
        dialogVisible = true
        personList = []
        totalCount = 0
        filterParams = {
            pageNo: 1,
            pageSize: 10
        }
        getGirdList(orgCode)
        getGirdDetails(orgCode)
    }

    // 网格列表
    let girdData = $ref([])
    const getGirdList = async (orgCode) => {
        let res = await getVillageGirdList({ orgCode })
        girdData = res.result
        if(girdData.length) filterParams.orgCode = girdData[0].orgCode
        getStreetList(girdData[0].id)
    }

    // 选择网格
    const girdChange = () => {
        streetOrgCode = ''
        let data = girdData.filter(item => {
            return item.orgCode == filterParams.orgCode
        })
        getStreetList(data.length ? data[0].id : '')
    }

    // 所属街道
    let streetData = $ref([])
    let streetOrgCode = $ref(null)
    const getStreetList = async (id) => {
        if(!id) {
            streetData = []
            return 
        }
        let res = await getVillageStreetList({ parentId: id })
        streetData = res.result
        if(streetData.length) streetOrgCode = streetData[0].orgCode
        getPersonList()
    }

    // 网格信息
    let details = $ref({})
    let detailsLoading = $ref(false)
    let getGirdDetails = (orgCode) => {
        detailsLoading = true
        getVillageGirdDetails({ orgCode }).then(res => {
            detailsLoading = false
            details = res.result
        })
    }

    // 居民信息
    let personList = $ref([])

    let filterParams = $ref({})

    // 总条数
    let totalCount = $ref(0)

    let infoLoading = $ref(false)

    let getPersonList = () => {
        infoLoading = true
        let data = JSON.parse(JSON.stringify(filterParams))
        data.orgCode = streetOrgCode ? streetOrgCode : data.orgCode
        getVillagePersonList(data).then(res => {
            infoLoading = false
            let { records, total } = res.result
            personList = records
            totalCount = total
            findGirdName()
        })
    }

    // 分页
    const handleCurrentChange = (page) => {
        filterParams.pageNo = page
        getPersonList()
    }

    // 点击查询
    const handleClickSearch = () => {
        filterParams.pageNo = 1
        getPersonList()
    }

    // 根据id 查找网格名称
    let leftName = $ref('')
    const findGirdName = () => {
        let data = {}
        if(streetOrgCode){
            data = streetData.find((item) => {
                return item.orgCode == streetOrgCode
            })
        }else {
            data = girdData.find((item) => {
                return item.orgCode == filterParams.orgCode
            })
        }

        leftName =  data ? data.departName : ''
    }

    // 户况详情
    let accountDetails = $ref(null)

    const handleClick = (id) => {
        accountDetails.showAccoutDetails(id)
    }

    defineExpose({
        showDialog
    })


</script>

<template>
    <el-dialog
        v-model="dialogVisible"
        width="1050px"
        custom-class="xz-dialog village-info-dialog"
    >
        <div class="dialog-title">{{ details.grid ? details.grid.countryName : ''  }}</div>
        <div class="village-info">
            <div class="title"><img src="../../../assets/images/grid-icon.png">网格信息</div>
    
            <div class="grid-info" v-loading="detailsLoading">
                <el-scrollbar :style="{ height: details.yzGridPeronList && details.yzGridPeronList.length > 2 ? '110px' : ''}">
                    <ul class="flex" v-if="details.grid">
                        <li>网格名称：{{ details.grid.countryName }}</li>
                        <li>网格编号：{{ details.grid.sysOrgCode }}</li>
                        <li>管理户数：{{ details.grid.houseNumb }}</li>
                        <li></li>
                    </ul>
                    <ul 
                        class="flex" 
                        v-for="(item, index) in details.yzGridPeronList"
                        :key="index"
                    >
                        <li>姓名：{{ item.name }}</li>
                        <li>职务：{{ item.position_dictText }}</li>
                        <li>联系电话：{{ item.phone }}</li>
                        <li>备注：{{ item.remark }}</li>
                    </ul>
                </el-scrollbar>
            </div>
    
            <div class="title"><img src="../../../assets/images/grid-icon.png">居民网格信息</div>
    
            <div class="resident-info-list xz-filter-wrap">
                <div class="">
                    <template v-if="filterParams.orgCode">
                        <el-form :inline="true" :label-width="85">
                            <el-form-item label="所属网格">
                                <el-select v-model="filterParams.orgCode" placeholder=" " @change="girdChange">
                                    <el-option
                                        v-for="(item, index) in girdData"
                                        :key="index"
                                        :label="item.departName"
                                        :value="item.orgCode"
                                    >
                                        {{ item.departName }}
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="所属街">
                                <el-select v-model="streetOrgCode" placeholder=" ">
                                    <el-option
                                        v-for="(item, index) in streetData"
                                        :key="index"
                                        :label="item.departName"
                                        :value="item.orgCode"
                                    >
                                        {{ item.departName }}
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="户主姓名">
                                <el-input v-model="filterParams.name" clearable></el-input>
                            </el-form-item>
                            <el-form-item label="房屋编号">
                                <el-input v-model="filterParams.manageNumber" clearable></el-input>
                            </el-form-item>
        
                            <el-button 
                                type="primary"
                                class="search-btn"
                                @click="handleClickSearch"
                            >
                                查询
                            </el-button>
                            
                        </el-form>
        
                        <div class="resident-list flex" v-loading="infoLoading">
                            <div class="grid-name flex-center">
                                {{ leftName }}
                            </div>
                            <div class="list-wrap flex">
                                <div 
                                    class="item" 
                                    v-for="(item, index) in personList" 
                                    :key="index">
                                    <div class="account-number flex-between">
                                        <span class="number">
                                            {{ item.manageNumber }}
                                            <img v-if="item.politicsStatus.indexOf('党') > -1" src="../../../assets/images/dang.png">
                                        </span>
                                        <span class="pointer" @click="handleClick(item.manageNumber)">详情></span>
                                    </div>
                                    <div class="content">
                                        <p>户主：{{ item.name }}</p>
                                        <p>人群类型：{{ item.politicsStatus }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </template>

                    <el-empty v-else></el-empty>
    
                </div>

                <el-pagination 
                    class="mt10" 
                    background 
                    layout="total, prev, pager, next" 
                    :current-page="filterParams.pageNo"
                    :total="totalCount" 
                    @current-change="handleCurrentChange"
                />
    
            </div>
        </div>

        
    </el-dialog>

    <!-- 户况详情 -->
    <account-details ref="accountDetails"></account-details>

    
</template>

<style lang="less" scoped>
    .village-info-dialog{
        .village-info{
            padding: 0 14px;
        }

        .title{
            color: #CCCCCC;
            font-size: 18px;
            margin-bottom: 10px;

            img{
                width: 20px;
                height: 20px;
                margin-right: 10px;
                vertical-align: top;
            }
        }

        .grid-info{
            padding: 20px 25px 5px;
            margin-bottom: 20px;

            li{
                width: 33.3%;
                font-size: 14px;
                color: #fff;
                padding-bottom: 15px;
            }
        }

        .resident-info-list, .grid-info{
            background: rgba(152,193,255,0.08);
        }

        .resident-info-list{
            min-height: 336px;
            padding: 20px 24px;
            font-size: 14px;
            color: #fff;

            &.xz-filter-wrap .el-input, &.xz-filter-wrap .el-select{
                width: 116px;
            }

            .grid-name{
                width: 54px;
                height: 200px;
                padding: 20px;
                background: #335DE1;
            }

            .list-wrap{
                flex: 1;
                flex-wrap: wrap;

                .item{
                    width: 166px;
                    height: 95px;
                    background: rgba(245,245,245,0.08);
                    margin: 0 0 10px 10px;

                    .account-number{
                        padding: 0 14px;
                        line-height: 30px;
                        background: #00A4FF;

                        img{
                            width: 20px;
                            vertical-align: middle;
                        }
                    }

                    .content{
                        padding: 9px 14px;
                        line-height: 24px;
                    }
                }
            }
        }

        .search-btn{
            vertical-align: top;
        }
    }
</style>